<template>
  <div>
    <table>
      <thead>
        <tr>
          <td v-for="(o, index) in tableHeader" :key="index">
            {{o.name}}
          </td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(list, k) in data" :key="k">
          <myCell v-for="(options, t) in tableHeader" :key="t" :tpl="options.tpl" :data="list[options['key']]"></myCell>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
// 思路： table 通过 scopedSlots.default 拿到 table-cols 数组的数据和每个table-cols的template的渲染函数， 传入cell 组件中用 render 渲染出来
export default {
  components: {
    myCell: require('./table-cell.vue').default
  },
  mounted () {
    console.log(11, this.$slots.default)
    this.tableHeader = this.$slots.default.filter(i => i.tag).map(u => {
      const props = u.componentOptions.propsData
      return {
        key: props.labelkey,
        name: props.label,
        tpl: u.data.scopedSlots.default
      }
    })
  },
  data () {
    return {
      tableHeader: []
    }
  },
  props: {
    data: {
      type: Array,
      default () {
        return []
      }
    }
  }
}
</script>
